<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .overlay {
            /* prevent text selection on overlay */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

            /* ignore pointer event on overlay */
            pointer-events: none;
        }
    </style>
</head>
<body>
<div class="container">

    <h1>
        scrollzoompanwl/index.html
    </h1>

    This is an example of interactive series scroll, pan, zoom and window/level with HTML
    based overlays.

    <br>
    <br>

    Controls:
    <ul>
        <li>Left click drag - window/level</li>
        <li>Middle Mouse button drag - pan</li>
        <li>Right click drag - zoom</li>
        <li>Mouse wheel - scroll images</li>
    </ul>

    <button id="x256" class="btn">256x256</button>
    <button id="x512" class="btn">512x512</button>
    <button id="invert" class="btn">Toggle Invert</button>
    <button id="interpolation" class="btn">Toggle Interpolation</button>
    <button id="hflip" class="btn">Horizontal Flip</button>
    <button id="vflip" class="btn">Vertical Flip</button>
    <button id="rotate" class="btn">Rotate 90</button>

    <br>
    <br>

    <div id="dicomImageWrapper" style="width:512px;height:512px;position:relative;color:white"
         oncontextmenu="return false"
         onmousedown="return false">

        <div id="dicomImage"
             style="width:512px;height:512px;top:0px;left:0px;position:absolute">
        </div>

        <div id="topleft" class="overlay" style="position:absolute;top:0px;left:0px">
            Patient Name
        </div>
        <div id="topright" class="overlay" style="position:absolute;top:0px;right:0px">
            Render Time:
        </div>
        <div id="bottomright" class="overlay" style="position:absolute;bottom:0px;right:0px">
            Zoom:
        </div>
        <div id="bottomleft" class="overlay" style="position:absolute;bottom:0px;left:0px">
            WW/WC:
        </div>
    </div>

    <div><span id="coords"></span></div>

</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>
    const imageIds = [
        'example://1',
        'example://2'
    ];

    let currentImageIndex = 0;

    // updates the image display
    function updateTheImage(imageIndex) {
        return cornerstone.loadAndCacheImage(imageIds[imageIndex]).then(function(image) {
            currentImageIndex = imageIndex;
            const viewport = cornerstone.getViewport(element);
            cornerstone.displayImage(element, image, viewport);
        });
    }

    // image enable the element
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    // setup handlers before we display the image
    function onImageRendered(e) {
        const eventData = e.detail;

        // set the canvas context to the image coordinate system
        cornerstone.setToPixelCoordinateSystem(eventData.enabledElement, eventData.canvasContext);

        // NOTE: The coordinate system of the canvas is in image pixel space.  Drawing
        // to location 0,0 will be the top left of the image and rows,columns is the bottom
        // right.
        const context = eventData.canvasContext;
        context.beginPath();
        context.strokeStyle = 'white';
        context.lineWidth = .5;
        context.rect(128, 90, 50, 60);
        context.stroke();
        context.fillStyle = "white";
        context.font = "6px Arial";
        context.fillText("Tumor Here", 128, 85);

        document.getElementById('topright').textContent = "Render Time:" + eventData.renderTimeInMs + " ms";
        document.getElementById('bottomleft').textContent = "WW/WL:" + Math.round(eventData.viewport.voi.windowWidth) + "/" + Math.round(eventData.viewport.voi.windowCenter);
        document.getElementById('bottomright').textContent = "Zoom:" + eventData.viewport.scale.toFixed(2);

    }
    element.addEventListener('cornerstoneimagerendered', onImageRendered);

    // load and display the image
    const imagePromise = updateTheImage(0);

    // add handlers for mouse events once the image is loaded.
    imagePromise.then(function() {

        // add event handlers to pan image on mouse move
        element.addEventListener('mousedown', function (e) {
            let lastX = e.pageX;
            let lastY = e.pageY;
            const mouseButton = e.which;

            function mouseMoveHandler(e) {
              const deltaX = e.pageX - lastX;
              const deltaY = e.pageY - lastY;
              lastX = e.pageX;
              lastY = e.pageY;

              if (mouseButton === 1) {
                let viewport = cornerstone.getViewport(element);
                viewport.voi.windowWidth += (deltaX / viewport.scale);
                viewport.voi.windowCenter += (deltaY / viewport.scale);
                cornerstone.setViewport(element, viewport);
              } else if (mouseButton === 2) {
                let viewport = cornerstone.getViewport(element);
                viewport.translation.x += (deltaX / viewport.scale);
                viewport.translation.y += (deltaY / viewport.scale);
                cornerstone.setViewport(element, viewport);
              } else if (mouseButton === 3) {
                let viewport = cornerstone.getViewport(element);
                viewport.scale += (deltaY / 100);
                cornerstone.setViewport(element, viewport);
              }
            }

            function mouseUpHandler() {
              document.removeEventListener('mouseup', mouseUpHandler);
              document.removeEventListener('mousemove', mouseMoveHandler);
            }

            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        });

        const mouseWheelEvents = ['mousewheel', 'DOMMouseScroll'];
        mouseWheelEvents.forEach(function(eventType) {
            element.addEventListener(eventType, function (e) {
                // Firefox e.detail > 0 scroll back, < 0 scroll forward
                // chrome/safari e.wheelDelta < 0 scroll back, > 0 scroll forward
                if (e.wheelDelta < 0 || e.detail > 0) {
                    if (currentImageIndex === 0) {
                        updateTheImage(1);
                    }
                } else {
                    if (currentImageIndex === 1) {
                        updateTheImage(0);
                    }
                }

                // Prevent page from scrolling
                return false;
            });
        });

        // Add event handler to the ww/wc apply button
        document.getElementById('x256').addEventListener('click', function (e) {
            element.style.width = '256px';
            element.style.height = '256px';
            cornerstone.resize(element);
        });

        document.getElementById('x512').addEventListener('click', function (e) {
            element.style.width = '512px';
            element.style.height = '512px';
            cornerstone.resize(element);
        });

        document.getElementById('invert').addEventListener('click', function (e) {
            const viewport = cornerstone.getViewport(element);
            viewport.invert = !viewport.invert;
            cornerstone.setViewport(element, viewport);
        });

        document.getElementById('interpolation').addEventListener('click', function (e) {
            const viewport = cornerstone.getViewport(element);
            viewport.pixelReplication = !viewport.pixelReplication;
            cornerstone.setViewport(element, viewport);
        });
        document.getElementById('hflip').addEventListener('click', function (e) {
            const viewport = cornerstone.getViewport(element);
            viewport.hflip = !viewport.hflip;
            cornerstone.setViewport(element, viewport);
        });
        document.getElementById('vflip').addEventListener('click', function (e) {
            const viewport = cornerstone.getViewport(element);
            viewport.vflip = !viewport.vflip;
            cornerstone.setViewport(element, viewport);
        });
        document.getElementById('rotate').addEventListener('click', function (e) {
            const viewport = cornerstone.getViewport(element);
            viewport.rotation += 90;
            cornerstone.setViewport(element, viewport);
        });

        element.addEventListener('mousemove', function(event) {
            const pixelCoords = cornerstone.pageToPixel(element, event.pageX, event.pageY);
            document.getElementById('coords').textContent = "pageX=" + event.pageX + ", pageY=" + event.pageY + ", pixelX=" + pixelCoords.x + ", pixelY=" + pixelCoords.y;
        });
    });
</script>
</html>
